import { PlusOutlined } from '@ant-design/icons';
import { Button, Divider, DatePicker, Menu, message, Input,Form,Card,Select,Row,Col } from 'antd';
import React, { useState, useRef,useEffect } from 'react';
import { PageHeaderWrapper,RouteContext } from '@ant-design/pro-layout';
import { connect } from 'dva';
import GdWage from './gdWage'
import PrivateWage from './privateWage'
import SaleWage from './saleWage'

const Setting = props => {
  const {dispatch} = props;
  const [tabActiveKey, setTabActiveKey] = useState("gdWage");
  /**
   * 切换tab
   * @param {*} tabActiveKey 
   */
  const onTabChange = tabActiveKey => {
    setTabActiveKey(tabActiveKey)
  };

  return (
    <PageHeaderWrapper
    tabActiveKey={tabActiveKey}
    onTabChange={onTabChange}
     tabList={[
      {
        key: 'gdWage',
        tab: '固定工资',
      },
      {
        key: 'saleWage',
        tab: '销售提成',
      },
      {
        key: 'privateWage',
        tab: '私教课费',
      }
    ]}>
      {
        tabActiveKey=='gdWage'&&<GdWage/>
      }
      {
        tabActiveKey=='saleWage'&&<SaleWage/>
      }
      {
        tabActiveKey=='privateWage'&&<PrivateWage/>
      }
    </PageHeaderWrapper>
  );
};

export default Setting;